<?php
/*
Template Name: Payment Schedule
Auther: Naseer Ahnad
Created: 10-03-2012
*/
?>
<?php get_header(); ?>
<script type="text/javascript">

function calculateBudget()
{
	var amt = jQuery('#amount').val();
	var arrTable = jQuery('#shedule-tbl tr').toArray();
	var fstInstall = jQuery('#fstInstall').val();
	$.each(arrTable, function(i, item){
		var installment = (amt - fstInstall) / 2;
		//alert(i);
		if(i >= 2)
		{
			jQuery(item).find('td:eq(2)').html('&pound;'+installment.toFixed(2));
		}
	});	
	
	//$("#first-installment").html('&pound;'+fstInstall);

}

</script>

    <div class="main-content-inner global-width">
        
    	<aside class="one-third">
          	<?php get_sidebar(); ?>
    	</aside>
    	
    	<section class="contents two-third">
             <h1>Payment Schedule</h1>
             <table width="100%" border="0">
                <tr>
                    <td><table width="700" border="0" class="nm_tables">
                        <tr>
                        <td><h2>Total Cost for Wedding</h2></td>
                        <td>
                        	<div class="search search-page">
                        		<input type="text" id="amount" class="search-field" />
                        		<button onclick="calculateBudget()" class="search-button">Calculate</button>
                        	</div>
                         </td>
                      </tr>
                      </table></td>
                  </tr>
                <tr>
                    <td><br />
                    <br />
                    <table width="700" border="0" class="nm_tables" id="shedule-tbl">
                        <tr>
                        <th width="213"><h2>Detail</h2></th>
                        <th width="122" id="cell-1-2"><h2>Installments</h2></th>
                        <th width="115" id="cell-1-3"><h2>Amount</h2></th>
                        <th width="232" id="cell-1-3"><h2>Date</h2></th>
                      </tr>
                        <tr>
                        <td width="213">Deposit Required</td>
                        <td width="122" id="cell-1-2">1st installment</td>
                        <td width="115" id="first-installment">&pound;<input type="number" id="fstInstall" style="width:100px;" /></td>
                        <td width="232" id="cell-1-3"><input type="date" /></td>
                      </tr>
                        <tr>
                        <td width="213">Six months prior to Wedding date </td>
                        <td width="122" id="cell-1-2">2nd installment</td>
                        <td width="115" id="cell-1-3"></td>
                        <td width="232" id="cell-1-3"><input type="date" /></td>
                      </tr>
                        <tr>
                        <td width="213">One Month prior to Wedding date </td>
                        <td width="122" id="cell-1-2">Final installment</td>
                        <td width="115" id="cell-1-3"></td>
                        <td width="232" id="cell-1-3"><input type="date" /></td>
                      </tr>
                      </table></td>
                  </tr>
              </table>
                </table>
			<center><a href="javascript:print()">
				<img src="<?php bloginfo( 'template_url' );?>/images/print_48.png" alt="Print" border="0" /></a>
            </center>
           	<div class="clear"></div>
            
    	</section>   
    	<div class="clearfix"></div>
    </div>

<!-- Main Content Ends -->
</section>

<?php get_footer(); ?>